<template>
	<view class="edit-company">
		<u--form labelPosition="left" :model="userFormInfo" ref="uForm" labelWidth="80">
			<u-form-item label="用户头像" prop="headImg" borderBottom>
				<view class="avatar-wrapper-box">
					<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="changeChooseavatar">
						<u--image v-if="!loading" mode="scaleToFill" width="150rpx" height="150rpx" class="avatar-box" :src="userFormInfo.headImg" />
					</button>
				</view>
			</u-form-item>
			<u-form-item label="用户昵称" required prop="username" borderBottom>
				<u--input type="nickname" @blur="nicknameFunc" v-model="userFormInfo.username" inputAlign="right" placeholder="请输入用户昵称" border="none"></u--input>
			</u-form-item>
			<u-form-item label="用户性别" prop="sex" borderBottom @click="isSexShow">
				<u--input :value="filterSex(userFormInfo.sex)" :disabled="true" disabledColor="#fff" inputAlign="right" placeholder="请选择用户性别" border="none"></u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			<u-form-item label="用户地址" prop="address" borderBottom>
				<view class="u-flex" style="width: 100%;justify-content: flex-end;" @click="handleAuthorize">
					<u--textarea placeholder="请选择地址" disabled v-model="userFormInfo.address" autoHeight />
					<u-icon name="map-fill"></u-icon>
				</view>
			</u-form-item>
			<u-form-item label="用户邮箱" prop="email" borderBottom>
				<u--input v-model="userFormInfo.email" inputAlign="right" placeholder="请输入邮箱" border="none"></u--input>
			</u-form-item>
			<u-form-item label="出生日期" prop="birthday" borderBottom @click="isTimeShow">
				<u--input :value="userFormInfo.birthday" :disabled="true" disabledColor="#fff" inputAlign="right" placeholder="请选择出生日期" border="none"></u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
		</u--form>

		<!-- 性别弹窗 -->
		<u-action-sheet :actions="sexList" title="请选择性别" @close="isSexShow" @select="changeSex" closeOnClickOverlay :show="sexShow"></u-action-sheet>

		<!-- 时间弹窗 -->
		<u-datetime-picker
			:show="timeShow"
			:minDate="315504000000"
			:maxDate="1486778555000"
			@confirm="changeTime"
			@cancel="isTimeShow"
			@close="isTimeShow"
			mode="date"
		></u-datetime-picker>
		<view style="height: 80rpx;"></view>
		<BottomBtn title="保存" @change="saveCompantInfo" />
	</view>
</template>

<script>
import UploadFile from '@/components/upLoadFile.vue';
import BottomBtn from '@/components/bottomBtn.vue';
import { authLocation } from '@/static/js/authLocation.js';
import { imgUrlBlob } from '@/static/js/imgUrlBlob.js';
const sexList = [{ id: 1, name: '男' }, { id: 2, name: '女' }];
export default {
	components: { UploadFile, BottomBtn },
	data() {
		return {
			sexList,
			loading: false,
			sexShow: false,
			timeShow: false,
			userInfo: this.$store.state.userInfo, // 用户详情
			wxIdentifier: this.$store.state.wxIdentifier, // 微信缓存信息
			apiUrl: this.$store.state.apiUrl, // api链接
			userFormInfo: {}, // 用户详情
			rules: {
				username: {
					type: 'string',
					required: true,
					message: '请填写用户名称',
					trigger: ['blur', 'change']
				}
			}
		};
	},
	onLoad() {
		this.getuserFormInfo();
	},
	onReady() {
		// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
		// this.$refs.uForm.setRules(this.rules);
	},
	methods: {
		// 选择图片头像
		changeChooseavatar(e) {
			this.loading = true;
			uni.uploadFile({
				url: this.apiUrl + '/no-auth/third-party/aliyun/uoload-file',
				filePath: e.detail.avatarUrl,
				name: 'file',
				success: res => {
					const data = JSON.parse(res.data);
					this.userFormInfo.headImg = data.data.url;
					console.log(this.userFormInfo, data.data.url);
				},
				complete: () => {
					this.loading = false;
				}
			});
		},
		isSexShow() {
			this.sexShow = !this.sexShow;
		},
		isTimeShow() {
			this.timeShow = !this.timeShow;
		},
		// 选择性别
		changeSex(info) {
			this.userFormInfo.sex = info.id;
		},
		// 选择时间
		changeTime(info) {
			this.userFormInfo.birthday = this.$u.timeFormat(info.value, 'yyyy-mm-dd');
			this.isTimeShow();
		},
		// 获取公司详情
		async getuserFormInfo() {
			const res = await this.$api.user.getUserOne({ id: this.userInfo.id });
			const { headImg, sex, username, wxOpenid } = res.data;
			this.userFormInfo = res.data.userInfo;
			this.userFormInfo.headImg = res.data.headImg; // 用户头像
			this.userFormInfo.sex = res.data.sex; // 用户性别
			this.userFormInfo.username = res.data.username; // 用户名称
			this.userFormInfo.wxOpenid = res.data.wxOpenid; // 用户微信openId
		},
		async getUserInfo(info) {
			const { iv, encryptedData } = info.detail;
			console.log(info);
			uni.login({
				provider: 'weixin',
				success: async res => {
					const info = await this.$api.wechat.WXopenid({
						code: res.code,
						type: 2
					});
					const ccc = await this.$api.wechat.DecryptUserInfo({
						iv,
						encryptedData,
						sessionKey: info.data.session_key
					});
				}
			});
		},
		// 过滤性别
		filterSex(type) {
			const info = this.sexList.filter(item => {
				return item.id == type;
			});
			return info.length > 0 ? info[0].name : '';
		},
		//  获取用户的地理位置，
		getLocationFn() {
			uni.chooseLocation({
				type: 'gcj02', // <map> 组件默认为国测局坐标gcj02
				success: res => {
					this.userFormInfo.latitude = res.latitude;
					this.userFormInfo.longitude = res.longitude;
					this.userFormInfo.address = res.address;
				}
			});
		},
		// 授权定位
		handleAuthorize() {
			authLocation(this.getLocationFn);
		},

		nicknameFunc(e) {
			console.log(e);
		},
		// 保存信息
		async saveCompantInfo() {
			this.userFormInfo.wxOpenid = this.wxIdentifier.openid;
			const res = await this.$api.user.editUserOne(this.userFormInfo);
			const userInfo = await this.$api.user.getUserOne({ id: this.userInfo.id });
			// 当用户为空时跳转补充用户信息页面
			this.$store.commit('editUserInfo', userInfo.data); // 缓存用户信息

			if (res.code === 200) {
				uni.$u.toast('编辑成功');
				setTimeout(() => {
					uni.redirectTo({
						url: '/pages/index/index'
					});
				}, 500);
			}
		}
	}
};
</script>

<style lang="scss">
.edit-company {
	background: #fff;
	padding: 30rpx;
}

.avatar-wrapper-box {
	display: flex;
	justify-content: flex-end;
	.avatar-wrapper {
		padding: 0;
		margin: 0;
		width: 150rpx;
	}
}
</style>
